<template>
  <div :style="{position: 'fixed',display: 'flex',top: fixedTabs?'10px':'75px',left: pageTitleWidth+'px',zIndex: 999}">
    <slot></slot>
  </div>
</template>

<script>
import {mapGetters, mapState} from "vuex";

export default {
  name: 'PageHeadArea',
  computed: {
    ...mapState("setting", [
      "fixedTabs",
    ]),
    ...mapGetters(['getPageTitleWidth']),
  },
  data() {
    return {
      pageTitleWidth: 0
    }
  },
  watch: {
    getPageTitleWidth: {
      handler(newVal) {
        // 更新本地的 pageTitleWidth
        this.pageTitleWidth = newVal;
      },
      immediate: true // 立即执行一次
    }
  },
  created() {
    this.pageTitleWidth = this.getPageTitleWidth
    // this.pageTitleWidth = storage.get('pageTitleWidth')
  }
}
</script>

<style scoped></style>